<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上报故障</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=none">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
</head>
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<script src="../src/js/base/h5base.js"></script>
<script src="../src/js/unit/jweixin-1.2.0.js"></script>
<body>
<div id="app" v-cloak>
    <div class="container" v-show="!isSubmit">
        <div class="section">
            <p>联系方式</p>
            <div class="sec-con sec-con-concat">
                <p style="border-bottom: 1px solid #ebecf0;">
                    <span>姓名：</span>
                    <input type="text" placeholder="姓名" v-model="uploadMsg.userName">
                </p>
                <p>
                    <span>电话：</span>
                    <input type="number" placeholder="请输入十一位手机号" v-model="uploadMsg.userPhone">
                    <span class="mobile-err">{{errMsg}}</span>
                </p>
            </div>
        </div>
        <div class="section">
            <p>故障类型</p>
            <div class="sec-con">
                <mt-radio
                        align="right"
                        v-model="uploadMsg.type"
                        :options="options">
                </mt-radio>
            </div>
        </div>
        <div class="section">
            <p>故障描述</p>
            <div class="sec-con">
                <textarea v-model="uploadMsg.description" cols="30" rows="10"
                          placeholder="请填写10字以上的故障描述以便我们提供更好的帮助～"></textarea>
            </div>
        </div>
        <div class="both"></div>
        <div class="upload">
            <p>图片（选填，提供故障照片）</p>
            <div class="up-con">
                <div class="up-img" v-for="(item ,index) in uploadArr">
                    <img :src="item" alt="" @click="showBigImage(item)">
                    <div class="del" @click.stop="delUploadImg(index)">
                        <img src="/img/error.png" alt="">
                    </div>
                </div>
                <div class="up-btn">
                    <img src="/img/upload.png" alt="">
                    <upload-dom :multiple="true" :max="3"  @filechange="fileResult"></upload-dom>
                </div>
            </div>
        </div>

        <div class="footer" @click="uploadEleFault">
            <div>提交故障</div>
        </div>
    </div>
    <div class="result" v-show="isSubmit">
        <div class="con" v-if="uploadResult">
            <img src="/img/success_upload.png" alt="">
            <h3>提交成功</h3>
            <p>已收到你提交的故障信息，我们会尽快处理您的故障信息。处理结果将会以短信的方式反馈给您！祝您生活愉快！</p>
        </div>
        <div class="con" v-else>
            <img src="/img/error_upload.png" alt="">
            <h3>提交失败</h3>
            <p>您提交的故障信息上传失败，请检查您的网络连接是否通畅！</p>
        </div>
        <div class="btn" @click="closePage">关闭</div>
    </div>
    <div class="img-mask" @click="imgMask=false" v-show="imgMask">
        <img :src="selectImage" alt="">
    </div>
</div>
</body>
</html>